<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* Mapv (https://github.com/huiyan-fe/mapv)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_mapvPolylineIntensity"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="mapv" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var map = L.map('map', {
        center: [36.64, 108.15],
        zoom: 5,
    });
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-china/rest/maps/ChinaDark";

    new L.supermap.TiledMapLayer(url).addTo(map);
    loadData();

    //示例数据来源为百度MapV的加偏数据，iClient未做纠偏处理
    function loadData() {
        var randomCount = 1000;
        var data = [];
        var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特",
            "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州",
            "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁",
            "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"
        ];

        // 自定义数据
        while (randomCount--) {
            var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: [
                        [cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() * 1],
                        [cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() * 1]
                    ]
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);
        var options = {
            gradient: {
                0: 'blue',
                0.5: 'yellow',
                1: 'red'
            },
            lineWidth: 0.5,
            max: 30,
            draw: 'intensity'
        };

        new L.supermap.MapVLayer(dataSet, options).addTo(map);
        setTimeout(function () {
            map.openPopup(resources.text_iClient, map.getCenter());
        }, 1000)
    }

</script>

</body>
</html>
